<template>
  <div class="my">
    <van-cell-group
      v-if="user"
      class="my-info"
    >
      <van-cell 
        class="base-info"
        :border="false"
      >
        <van-image
          slot="icon"
          width="66"
          height="66"
          round
          fit="cover"
          :src="currentUser.photo"
        />
        <div
          slot="title"
          class="van-nicheng"
        >
          {{ currentUser.name }}
        </div>
        <van-button
          class="van-btn-bjzl"
          size="small"
          round
          to="/user/profile"
        >
          编辑资料
        </van-button>
      </van-cell>
      <van-grid 
        class="van-grid-info"
        :border="false"
      >
        <van-grid-item>
          <div slot="text">
            <div class="span">
              {{ currentUser.art_count }}
            </div>
            <div class="text">
              头条
            </div>
          </div>
        </van-grid-item>
        <van-grid-item>
          <div slot="text">
            <div class="span">
              {{ currentUser.follow_count }}
            </div>
            <div class="text">
              关注
            </div>
          </div>
        </van-grid-item>
        <van-grid-item>
          <div slot="text">
            <div class="span">
              {{ currentUser.fans_count }}
            </div>
            <div class="text">
              粉丝
            </div>
          </div>
        </van-grid-item>
        <van-grid-item>
          <div slot="text">
            <div class="span">
              {{ currentUser.like_count }}
            </div>
            <div class="text">
              获赞
            </div>
          </div>
        </van-grid-item>
      </van-grid>
    </van-cell-group>
    <div
      v-else
      class="notLogged"
    >
      <div
        class="notLogged-img"
        @click="$router.push({
          name:'login',
          query:{
            redirect:'/my'
          }
        })"
      >
        <img
          src="./image/phone.png"
        >
      </div>
      <div class="notLogged-text">
        登录&nbsp;&nbsp;/&nbsp;&nbsp;注册
      </div>
    </div>
    <van-grid
      :column-num="2"
      :border="false"
    >
      <van-grid-item 
        icon-prefix="iconfont icon"
        icon="shoucang" 
        text="收藏"
        class="lishi-shoucang"
      />
      <van-grid-item 
        icon-prefix="iconfont icon"
        icon="lishi" 
        text="历史"
        class="lishi-shoucang"
      />
      <van-cell
        class="info-tongzhi"
        :border="false"
        title="消息通知"
        is-link
        url="/"
      />
      <van-cell
        class="xiaozhi"
        :border="false"
        title="小智同学"
        is-link
        to="/user/chat"
      />
      <van-cell
        v-if="user"
        class="btn-out"
        :border="false"
        title="退出登录"
        @click="onLogout"
      />
    </van-grid>
  </div>
</template>

<script>
	import { mapState } from 'vuex';
	import { getCurrentUser } from '../../api/user';
	export default {
		name:'My',
		components:{},
		data: () => {
			return{
				name:'我的',
				currentUser:{}//当前登录用户信息
			}
		},
		computed:{
			...mapState(['user'])
		},
		created(){
			this.loadCurrentUser()
		},
		methods:{
			async loadCurrentUser(){
				const {data} = await getCurrentUser()
				console.log(data)
				this.currentUser = data.data
				console.log(this.currentUser)
			},
			
		   onLogout(){
			   //提示用户确认退出
			  this.$dialog.confirm({
			     title: '退出提示',
			     message: '确认退出吗？',
			   })
			     .then(() => {//确认执行
			       //清除用户登录状态
				   this.$store.commit('setUser',null)
			     })
			     .catch(() => {//取消执行
			       
			     });
		   }
		},
	}
</script>

<style scoped="scoped" lang="less">
	.my{
		background-color: #f5f7f9;
		.my-info{
			background-image: url(./image/banner.png);
			background-size: 100% 100%;
			background-repeat: no-repeat;
			.base-info{
				background-color: unset;
				padding-top: 25px;
				padding-left: 13.5px;
			}
			/deep/.van-grid-item__content {
				background-color: unset !important;
				border-bottom: 1px solid;
			}
		}
		.van-nicheng{
			line-height: 66px;
			margin-left: 15px;
			font-size: 15px;
			color: #ffffff;
			}
		.van-cell__value{
			line-height: 60px;
			.van-btn-bjzl{
				height: 16px;
				color: #a3a3a3;;
			}
		}
		.van-grid-info{
			color: #ffffff;
			.span{
				font-size: 18px;
				text-align:center;
			}
			.text{
				text-align:center;
				font-size: 11.5px;
			}
		}
		/deep/.icon-shoucang{
			color: #eb5253;
			font-size: 18px;
		}
		/deep/.icon-lishi{
			color: #ff9d1d;
			font-size: 18px;
		}
		/deep/.van-grid-item__text{
			font-size: 14px;
			letter-spacing: 4px;
			margin-left: 2px;
		}
		.lishi-shoucang{
			border-bottom: 6px solid #f5f7f9;
		}
		.info-tongzhi{
		    border-bottom: 1px solid #edeff3;
		}
		.xiaozhi{
			border-bottom: 6px solid #f5f7f9;
		}
		.btn-out{
			text-align: center;
			color: #d86262;
		}
	}
	// 未登录
	.notLogged{
		height: 180px;
		background-image: url(./image/banner.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		text-align: center;
	}
	.notLogged-img img{
		width: 66px;
		height: 66px;
		margin-top: 60px;
	}
	.notLogged-text{
		color: #fff;
		font-size: 17px;
		}
</style>

